import React, { useEffect, useState } from 'react';
import ProCard, { StatisticCard } from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Select, Space, Breadcrumb } from 'antd';
import { useRequest } from 'umi';

import Achievements from './component/Achievements';
import StudentTrain from './component/StudentTrain';
import CooperationExchange from './component/CooperationExchange';
const { Option } = Select;

export default () => {
  const [tabKey, setTabKey] = useState('Achievements');

  const [groupId, setGroupId] = useState();
  const [groupName, setGroupName] = useState();
  const [groupList, setGroupList] = useState<any>();

  const getUserInfo = useRequest((data = null) => {
    return {
      url: 'http://10.1.40.84:9993/user/getUserInfo',
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });

  useEffect(() => {
    if (getUserInfo.data) {
      setGroupId(getUserInfo?.data?.userGroupBo?.groupId);
      setGroupName(getUserInfo?.data?.userGroupBo?.groupName);

      const personInfo = JSON.parse(localStorage.getItem('personInfo') || '{}');
      if (personInfo.ROLE_管理员?.group) {
        setGroupList(personInfo.ROLE_管理员?.group);
      } else if (personInfo.ROLE_方向负责人?.group) {
        setGroupList(personInfo.ROLE_方向负责人?.group);
      } else {
        setGroupList([
          {
            label: getUserInfo?.data?.userGroupBo?.groupName,
            value: getUserInfo?.data?.userGroupBo?.groupId,
          },
        ]);
      }
    }
  }, [getUserInfo.data]);

  const onTabChange = (value: any) => {
    setTabKey(value);
  };

  return (
    <PageContainer
      header={{
        title: (groupName || '') + '子方向看板',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>个人中心</Breadcrumb.Item>
            <Breadcrumb.Item>子方向看板</Breadcrumb.Item>
          </Breadcrumb>
        ),
      }}
      tabList={[
        {
          tab: '科研成果',
          key: 'Achievements',
          closable: false,
        },
        {
          tab: '合作交流',
          key: 'CooperationExchange',
          closable: false,
        },
        // {
        //   tab: '学生培养(开发中)',
        //   key: 'StudentTrain',
        //   closable: false,
        // },
      ]}
      tabProps={{
        type: 'editable-card',
        hideAdd: true,
        onEdit: (e, action) => console.log(e, action),
      }}
      onTabChange={onTabChange}
      tabBarExtraContent={
        groupList && getUserInfo.data ? (
          <>
            <>查找子方向：</>
            <Select
              style={{ width: 240 }}
              showSearch
              filterOption={(input, option) =>
                (option!.children as unknown as string)
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
              onSelect={(e: any) => {
                const temp = JSON.parse(e);
                setGroupId(temp.groupId);
                setGroupName(temp.groupName);
              }}
              defaultValue={
                getUserInfo?.data?.userGroupBo?.groupId
                  ? JSON.stringify({
                      groupId: getUserInfo?.data?.userGroupBo?.groupId,
                      groupName: getUserInfo?.data?.userGroupBo?.groupName,
                    })
                  : ''
              }
            >
              {groupList?.map((item: any) => (
                <Option
                  key={item.value}
                  value={JSON.stringify({
                    groupId: item.value,
                    groupName: item.label,
                  })}
                >
                  {item.label}
                </Option>
              ))}
            </Select>
          </>
        ) : (
          ''
        )
      }
    >
      {tabKey === 'Achievements' ? <Achievements groupId={groupId} /> : null}
      {tabKey === 'CooperationExchange' ? (
        <CooperationExchange groupId={groupId} />
      ) : null}
      {tabKey === 'StudentTrain' ? <StudentTrain /> : null}
    </PageContainer>
  );
};
